<template>
  <view style="padding: 30upx;background: #F9F9F9;width: 100%;">
    <view class="input-group">
      <view class="input-row">
        <m-input
          type="password"
          focus
          clearable
          v-model="dataForm.originalPassword"
          placeholder="请输入旧密码"
        ></m-input>
      </view>
      <view class="input-row">
        <m-input type="password" displayable v-model="dataForm.password" placeholder="请输入新密码"></m-input>
      </view>
      <view v-if="password" class="prompt">{{tips}}</view>
      <view class="input-row">
        <m-input
          type="password"
          displayable
          v-model="dataForm.confirmPassword"
          placeholder="请确认新密码"
        ></m-input>
      </view>
      <view v-if="confirmPassword" class="prompt">{{tips}}</view>
    </view>
    <view style="margin-top: 30upx;color: #B3B3B3;">密码长度最少为6位</view>
    <view class="btn-row">
      <button type="primary" class="primary" @tap="register" style="border-radius: 50upx;">确认修改</button>
    </view>

    <model v-if="hidden">
      <view class="model-content">
        <view>密码修改成功！</view>
      </view>
      <view class="model-footer">
        <button type="primary" class="model-footer-btn primary" @click="confirm">确定</button>
      </view>
    </model>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'

export default {
  data() {
    return {
      dataForm: {
        originalPassword: '',
        password: '',
        confirmPassword: ''
      },
      hidden: false,
      password: false,
      confirmPassword: false,
      tips: ''
    }
  },
  methods: {
    register() {
      /**
       * 客户端对账号信息进行一些必要的校验。
       * 实际开发中，根据业务需要进行处理，这里仅做示例。
       */
      if (this.dataForm.password.length < 6) {
        this.password = true
        this.tips = '密码最短为 6 个字符'
        return
      }

      if (this.dataForm.password !== this.dataForm.confirmPassword) {
        this.password = true
        this.confirmPassword = true
        this.tips = '两次密码不一致！'
        return
      }
      const data = {
        userId: uni.getStorageSync('userId'),
        password: this.dataForm.originalPassword,
        newPassword: this.dataForm.password,
        againPassword: this.dataForm.confirmPassword
      }
      post_md5('/usercenter-app/user/modifypassword', data).then(res => {
        if (res.code == 200) {
          this.hidden = true
        }
      })
    },

    confirm() {
      this.hidden = false
      uni.navigateBack({})
    }
  }
}
</script>

<style>
.input-row {
  background: #ffffff;
  margin-top: 20upx;
  height: 80upx;
  font-size: 30upx;
}
</style>
